<template>
<div style="margin:0 20px 0 20px">
  <Row :gutter="20">
    <i-col :lg="6">
      <Card class="card-list">
        <template #title>
           <Icon type="ios-options" /> 个人设置
        </template>
        <CellGroup  @on-click="cellBtn">
          <Cell title="基础设置" label="个人账户信息设置" name="basic" :selected="step==='basic'"/>
          <Cell title="安全设置" label="密码、邮箱等设置" name="safe" :selected="step==='safe'"/>
          <Cell title="账号绑定" label="绑定第三方社交账号" name="bind" :selected="step==='bind'"/>
          <Cell title="新消息通知" label="各种通知的设置" name="message" :selected="step==='message'"/>
        </CellGroup>
      </Card>
    </i-col>
    <i-col :lg="18">
      <Card class="card-list-form">
        <div v-if="step==='basic'">
          <h2>基础设置</h2>
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="top" style="margin-top:10px;">
            <Row :gutter="20">
              <i-col :lg="12">
                 <FormItem label="昵称" prop="name">
                  <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
                </FormItem>
                <FormItem label="性别" prop="gender">
                    <RadioGroup v-model="formValidate.gender">
                        <Radio label="male">男</Radio>
                        <Radio label="female">女</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="邮箱" prop="mail">
                    <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
                </FormItem>
                <FormItem label="城市" prop="city">
                    <City v-model="formValidate.city" />
                </FormItem>
                <FormItem label="个人简介" prop="desc">
                    <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
                </FormItem>
              </i-col>
              <i-col :lg="12">
                <FormItem label="头像" prop="mail">
                   <div class="demo-upload-list" v-for="item in uploadList" :key="item.name">
                      <template v-if="item.status === 'finished'">
                          <Image :src="item.url" fit="cover" width="100%" height="100%" />
                          <div class="demo-upload-list-cover">
                              <Icon type="ios-eye-outline" @click="handleView(item.name)"></Icon>
                              <Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon>
                          </div>
                      </template>
                      <template v-else>
                          <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                      </template>
                  </div>
                  <Upload
                      ref="upload"
                      :show-upload-list="false"
                      :default-file-list="defaultList"
                      :on-success="handleSuccess"
                      :format="['jpg','jpeg','png']"
                      :max-size="2048"
                      :on-format-error="handleFormatError"
                      :on-exceeded-size="handleMaxSize"
                      :before-upload="handleBeforeUpload"
                      multiple
                      type="drag"
                      action="//jsonplaceholder.typicode.com/posts/"
                      style="display: inline-block;width:58px;">
                      <div style="width: 58px;height:58px;line-height: 58px;">
                          <Icon type="ios-camera" size="20"></Icon>
                      </div>
                  </Upload>
                  <ImagePreview v-model="visible" :preview-list="['https://file.iviewui.com/images/' + imgName]" />
                </FormItem>
              </i-col>
            </Row>
           
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
            </FormItem>
          </Form>
        </div>
        <div v-if="step==='safe'">
          <h2>安全设置</h2>
          <CellGroup>
            <Cell label="绑定手机和邮箱，并设置密码，帐号更安全">
              <strong>账户密码</strong>
              <template #extra>
                  <a>修改</a>
              </template>
            </Cell>
            <Divider></Divider>
            <Cell label="已绑定手机号：+86100****0000">
              <strong>绑定手机</strong>
              <template #extra>
                  <a>修改</a>
              </template>
            </Cell>
            <Divider></Divider>
            <Cell label="未设置密保问题，密保问题可有效保护账户安全">
              <strong>密保问题</strong>
              <template #extra>
                  <a>设置</a>
              </template>
            </Cell>
            <Divider></Divider>
            <Cell label="已绑定域名：xx.xxx">
              <strong>个性域名</strong>
              <template #extra>
                  <a>修改</a>
              </template>
            </Cell>
          </CellGroup>
        </div>
        <div v-if="step==='bind'">
          <h2>账号绑定</h2>
          <CellGroup>
            <Cell>
              <strong><Avatar :src="weixin" size="24"/>  微信</strong>
              <template #label>
                当前未绑定微信账号
              </template>
              <template #extra>
                  <a>绑定</a>
              </template>
            </Cell>
            <Divider></Divider>
            <Cell>
              <strong><Avatar :src="weibo" size="24"/>  微博</strong>
              <template #label style="padding-top:10px">
                当前未绑定微博账号
              </template>
              <template #extra>
                  <a>绑定</a>
              </template>
            </Cell>
            <Divider></Divider>
            <Cell>
              <strong><Avatar :src="qq" size="24"/>  QQ</strong>
              <template #label style="padding-top:10px">
                当前未绑定QQ账号
              </template>
              <template #extra>
                  <a>绑定</a>
              </template>
            </Cell>
          </CellGroup>
        </div>

        <div v-if="step==='message'">
          <h2>新消息通知</h2>
          <CellGroup>
            <Cell label="未关注的人向您发私信时的通知">
              <strong>陌生人私信</strong>
              <template #extra>
                <Switch>
                  <template #open>
                    <span>开</span>
                  </template>
                  <template #close>
                    <span>关</span>
                  </template>
                </Switch>
              </template>
            </Cell>
            <Divider></Divider>
            <Cell label="有人对我发出邀请时，我会收到消息通知">
              <strong>邀请/评论消息</strong>
              <template #extra>
                <Switch>
                  <template #open>
                    <span>开</span>
                  </template>
                  <template #close>
                    <span>关</span>
                  </template>
                </Switch>
              </template>
            </Cell>
            <Divider></Divider>
            <Cell label="有人对我赞同或赞赏时，我会收到消息通知">
              <strong>赞同/赞赏消息设置</strong>
              <template #extra>
                <Switch>
                  <template #open>
                    <span>开</span>
                  </template>
                  <template #close>
                    <span>关</span>
                  </template>
                </Switch>
              </template>
            </Cell>
            <Divider></Divider>
            <Cell label="邮件设置">
              <strong>重要事件发生时，我将会收到邮件提醒</strong>
              <template #extra>
                <Switch>
                  <template #open>
                    <span>开</span>
                  </template>
                  <template #close>
                    <span>关</span>
                  </template>
                </Switch>
              </template>
            </Cell>
          </CellGroup>
        </div>
      </Card>
    </i-col>
  </Row>
</div>
</template>

<script>
export default {
    components:{

    },
    data () {
        return {
          qq:require('@/assets/qq.png'),
          weixin:require('@/assets/weixin.png'),
          weibo:require('@/assets/weibo.jpg'),
          step:'basic',
          formValidate: {
              name: '',
              mail: '',
              city: '110000',
              gender: '',
              interest: [],
              date: '',
              time: '',
              desc: ''
          },
          ruleValidate: {
              name: [
                  { required: true, message: 'The name cannot be empty', trigger: 'blur' }
              ],
              mail: [
                  { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                  { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
              ],
              city: [
                  { required: true, message: 'Please select the city', trigger: 'change' }
              ],
              gender: [
                  { required: true, message: 'Please select gender', trigger: 'change' }
              ],
              desc: [
                  { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
                  { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
              ]
          },
          defaultList: [
              {
                  'name': 'image-demo-1.jpg',
                  'url': 'https://file.iviewui.com/images/image-demo-1.jpg'
              }
          ],
          imgName: '',
          visible: false,
          uploadList: []
        }
    },
    mounted () {
      this.uploadList = this.$refs.upload.fileList;
    },
    methods: {
      cellBtn(name){
        this.step = name
      },
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
            if (valid) {
                this.$Message.success('Success!');
            } else {
                this.$Message.error('Fail!');
            }
        })
      },
      handleReset (name) {
        this.$refs[name].resetFields();
      },
      handleView (name) {
          this.imgName = name;
          this.visible = true;
      },
      handleRemove (file) {
          const fileList = this.$refs.upload.fileList;
          this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
      },
      handleSuccess (res, file) {
          file.url = 'https://file.iviewui.com/images/image-demo-3.jpg';
          file.name = 'image-demo-3.jpg';
      },
      handleFormatError (file) {
          this.$Notice.warning({
              title: 'The file format is incorrect',
              desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
          });
      },
      handleMaxSize (file) {
          this.$Notice.warning({
              title: 'Exceeding file size limit',
              desc: 'File  ' + file.name + ' is too large, no more than 2M.'
          });
      },
      handleBeforeUpload () {
          const check = this.uploadList.length < 5;
          if (!check) {
              this.$Notice.warning({
                  title: 'Up to five pictures can be uploaded.'
              });
          }
          return check;
      }
    }
}
</script>
<style scoped>
.card-list >>> .ivu-card-body {
    padding: 0px;
}
.card-list-form >>> .ivu-cell-label{
  margin-top:10px;
}
</style>
<style>
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>